<template>
  <div class="audition34">
    <p>margin边距叠加问题是在垂直方向上的父子元素或兄弟元素在相邻位置设置的margin发生重叠或合并的现象</p>
    <p>边距叠加(合并)问题，存在一些积极作用。比如我们在一篇文章中写了很多的p标签，并且给p标签都设置了相同的margin，此时，相邻的p标签之间会保持相同的间隔。</p>
    <p>比如：</p>
    <code class="code">
      &lt;p&gt;11111111111111111&lt;/p&gt;<br />
      &lt;p&gt;222222222222222222&lt;/p&gt;<br />
      &lt;p&gt;333333333333333&lt;/p&gt;
    </code>
    <p>显示效果：</p>
    <img src="@images/margin1.png" alt="" class="img">
    <p>第一个p标签下边距是10px，第二个p标签上边距是10px，两个相邻的边距之间发生了叠加，最终结果是两者之间的间隔是10px</p>
    <p>边界叠加(合并)问题，有2种情况：</p>
    <p>
      <span class="indient">1. 兄弟元素之间</span><br />
      <span class="indient">2. 父子元素之间</span><br />
    </p>
    <p>他们之间的边距叠加，存在一定的规则。</p>
    <p>---------------------------------------------------</p>
    <h3>兄弟元素之间：</h3>
    <p>规则：</p>
    <p>
      <span class="indient color">符号相同取较大值，符号不同取加和。</span>
    </p>
    <p>例如，垂直相邻的两个盒子box1和box2</p>
    <p>给box1设置<span class="color">margin-bottom: 20px;</span>，给box2设置<span class="color">margin-top: 10px;</span>，20和10符号相同且20比10大，所以他们之间最终的间隔是20px</p>
    <p>给box1设置<span class="color">margin-bottom: -20px;</span>，给box2设置<span class="color">margin-top: -10px;</span>，-20和-10符号相同且-10比-20大，所以他们之间最终的间隔是-10px</p>
    <p>给box1设置<span class="color">margin-bottom: 20px;</span>，给box2设置<span class="color">margin-top: -10px;</span>，20和-10符号不同，两者相加：20-10=10，所以他们之间最终的间隔是10px</p>
    <p>---------------------------------------------------</p>
    <h3>父子元素之间</h3>
    <p>这个不是很好理解，加个示例：</p>
    <v-md-preview :text="text1" />
    <p>初始页面效果为：</p>
    <img src="@images/margin2.png" alt="" class="img">
    <p>当给子元素<span class="color">box2</span>添加margin-top时，box1和box2之间并不会产生间隔，而是<span class="color">box和box1之间产生了间隔</span></p>
    <p>也就是父元素box1和子元素box2在接触位置发生了边距叠加(合并)问题。并且叠加后最终得到的都是box和box1之间的间隔，而非父子元素之间的间隔</p>
    <p>这种叠加规则是：</p>
    <p>
      <span class="indient">都是正数，取较大值</span><br />
      <span class="indient">都是负数，取较小值</span><br />
      <span class="indient">符号不同，取加和</span>
    </p>
    <p>例如，给box1设置<span class="color">margin-top: 20px;</span>，给box2设置<span class="color">margin-top: 10px;</span>，20和10都是正数，20大于10，所以box和box1的间隔是20px</p>
    <p>例如，给box1设置<span class="color">margin-top: -20px;</span>，给box2设置<span class="color">margin-top: -10px;</span>，-20和-10都是负数，-20小于-10，所以box和box1的间隔是-20px</p>
    <p>例如，给box1设置<span class="color">margin-top: 20px;</span>，给box2设置<span class="color">margin-top: -10px;</span>，20和-10符号不同，20-10=10，所以box和box1的间隔是10px</p>
    <hr>
    <p>虽然边距叠加起到了一些积极作用，但是在更多的时候，会给开发带来一些问题，导致实际布局出现了不想要的效果，这就需要用一些方法来避免边距叠加。</p>
    <p>最常用的方法是：</p>
    <p>1. 需要同时设置父子元素的margin时，给父元素添加overflow: hidden;</p>
    <p>2. 父元素尽可能使用padding，代替margin</p>
    <p>还可以使用的方法：</p>
    <p>在相邻位置添加透明边框，border: 1px solid transparent;这种方法会改变布局尺寸，不建议使用。</p>
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition34',
  data() {
    return {
      text1: `${prefix}
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
            * {
              margin: 0;
              padding: 0;
            }
            .box {
              width: 50px;
              height: 50px;
              background-color: blue;
            }
            .box1 {
              width: 200px;
              height: 200px;
              background-color: aquamarine;
            }
            .box2 {
              width: 100px;
              height: 100px;
              background-color: pink;
            }
          </style>
        </head>
        <body>
          <div class="box"></div>
          <div class="box1">
            <div class="box2"></div>
          </div>
        </body>
        </html>
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>